<template>
    <div class="AgentView-container">
      <div class="AgentView-LeftNav">
        <div class="AgentView-LeftNav-TopBar">
          <a-button type="default" @click="router.push('/dashboard')">
            <LeftOutlined style="position: absolute; right: 12px; top: 12px;" />
          </a-button>
          <img
            style="position: absolute; left:56px; top: 15px;"
            src="../../assets/CourseManageView/inform.svg"
            alt="SVG Image"
          />
          <p>数据科学导论</p>
        </div>
        <div class="AgentView-LeftNav-Management">
          <div class="AgentView-LeftNav-Management-Title">课程管理</div>
          <div class="AgentView-LeftNav-Management-Nav">
            <a-menu v-model:selectedKeys="current" mode="vertical" :items="items" />
          </div>
        </div>
      </div>
      <div class="AgentView-Content">
            <div class="Agent-Confirm">
                <a-button type="primary" html-type="submit">确认修改</a-button>
            </div>
            <div class="Agent-Refresh">
                <a-button type="default">重置智能体设置</a-button>
            </div>
            <div class="AgentView-Content-Input">
                <div class="AgentView-Content-Input-Col">
                    <div class="AgentView-Content-Input-Col-Title">课程引导</div>
                    <a-textarea v-model:value="guidance" placeholder="作为你的智能助教，我能答疑解惑。你可以试着问我：" :autoSize="{ minRows: 5, maxRows:10}"/>
                    
                </div>
                <div class="AgentView-Content-Input-Col">
                    <div class="AgentView-Content-Input-Col-Title">提问设置</div>

                    <div v-for="(input, index) in tipInputs" :key="index">
                        <a-input style="margin-left: 74px;width: 416px;margin-bottom: 8px;border-radius: 12px;border: 1px solid rgba(0, 0, 0, 0.15);display: flex;padding: 8px 12px;align-items: flex-start;gap: 6px;" :placeholder="input.value" v-model="input.value" allow-clear/>
                    </div>
                    <a-button type="default" style="width:40px;height:40px;padding:0;" @click="addInput"><PlusOutlined /></a-button>
                    <p style="height: 30px;font-size:16px;margin-top:12px;font-weight:550;">当前生效提问 {{tipNum}} 个</p>
                </div>

                <div class="Agent-Input-Checkbox">
                    <p style="font-weight:550;">其他设置</p>
                    <a-checkbox v-model:checked="online_search">联网搜索</a-checkbox>
                    <br />
                    <a-checkbox v-model:checked="code_help">代码助手</a-checkbox>
                </div>

            </div>
        </div>
      <div class="Agent-Wrap">
        <AgentChatFrame />
      </div>
    </div>
  </template>
  
  <script setup>
  import { h, ref, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { LeftOutlined } from '@ant-design/icons-vue';
  import AgentChatFrame from '../../components/AgentChatFrame.vue';
  import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import api from '../../api/index';

  
  const router = useRouter();
  const route = useRoute();
  const courseNumber = route.params.course_number;
  
  const current = ref(['Agent']);
const items = ref([
    {
    key: 'CourseInfo',
    // icon: () => h(MailOutlined),
    label: h('a', { href: './info', target: '_self'}, '课程信息'),
    // label: '课程信息',
    title: 'CourseInfo',
  },
  {
    key: 'Students',
    // icon: () => h(MailOutlined),
    label: h('a', { href: './students', target: '_self' }, '人员管理'),
    // label: '人员管理',
    title: 'Students',
  },
  {
    key: 'knowledge',
    // icon: () => h(MailOutlined),
    label: h('a', { href: './knowledge', target: '_self' }, '知识库管理'),
    // label: '知识库管理',
    title: 'knowledge',
  },
  {
    key: 'Agent',
    // icon: () => h(MailOutlined),
    label: h('a', { href: './agent', target: '_self' }, '智能体设置'),
    // label: '智能体设置',
    title: 'Agent',
  },
]);


const guidance = ref('');

const tipInputs=ref([
        // 初始一个空对象，或者根据需要预填值
      ])

const tipNum = ref(0);
//const firstItems = tipInputs.value.slice(0, tipNum);
function addInput() {
    // 向数组中添加一个新的输入框对象，初始值为空字符串
    if (tipInputs.value.length >= tipNum) {
        message.error('达到提问设置上限');
    } else {
        tipInputs.value.push({ value: "[null]" })
    }
    
} 



const online_search = ref(false);

const code_help = ref(false);

const fetchAgentSettings = async () => {
    try {
        const response = await api.getCourseAgentInfo(courseNumber);
        console.log(response.data);

    guidance.value = response.data.agent_guidance;    
    online_search.value = response.data.web_ability;
    code_help.value = response.data.code_ability;
    // tipNum.value = response.data.agent_precommand;
    
    if (Array.isArray(response.data.agent_precommand)) {
        tipInputs.value = response.data.agent_precommand.map(tip => ({
            value: tip,
        }));
    } else {
        tipInputs.value = [];
    }
  } catch (error) {
    console.error("获取知识库文件失败", error);
    message.error("获取知识库文件失败");
    tipInputs.value = [];
  } 
};

onMounted(() => {
    fetchAgentSettings();
});

</script>

<style lang="scss" scoped>
:deep(.ant-input){
    margin-left: 8px !important;
}

.AgentView-container {
    min-width: 1366px;
    width:100vw;
    height: 100vh;
    display: flex;
    background: #F6F8F7;
}

.AgentView-LeftNav {
    box-sizing: border-box;
    width: 236px;
    height: 100%;
    flex-shrink: 0;
    display: inline-block;
    margin-left: 12px; 
    padding-top: 20px;
    justify-content: center; 
}
.AgentView-LeftNav-TopBar {
    width:236px;
    height: 40px;

    align-content: center;
    position: relative;
}
.AgentView-LeftNav-TopBar .ant-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    box-shadow: 0px 2px 2px 0px rgba(9, 9, 9, 0.06);

    display: inline-block;
    position: absolute;
    left: 0;
    top: 4px;
    
}
.AgentView-LeftNav-TopBar p {
    overflow: hidden;
    color: var(--45, #8C8C8C);
    text-overflow: ellipsis;
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; 

    
    display: inline-block;
    position: absolute;
    left:84px;
    top: 12px;  
}
.AgentView-LeftNav-Management {
    width:230px;
    /*height: 900px; */
    height:auto; 
    margin-top: 28px;
    
}
.AgentView-LeftNav-Management-Title {
    overflow: hidden;
    color: var(--45, #8C8C8C);
    text-overflow: ellipsis;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; 
}

.AgentView-LeftNav-Management-Nav {
    width:220px;
    height:500px;
    margin-top: 4px;

    .ant-menu {
        background: #F6F8F7;
        border:0 !important;
      }
    :deep(.ant-menu-light .ant-menu-item-selected) {   
        border-radius: 12px;
        border: 1px solid #D9D9D9;
        background-color: #FFF !important;
        box-shadow: 0px 2px 2px 0px #F2F2F2, 0px 2px 2px 0px #F2F2F2;
    }
}

.AgentView-Content {
    display: flex;
    flex:1;
    flex-direction: column;
    
    height: calc(100% - 40px);
    margin-top: 20px;
    margin-bottom: 20px;

    border-radius: 12px;/*边框圆角*/
    border: 1px solid #EDEDED;
    background: #FFF;
    box-shadow: 0px 2px 2px 0px #F2F2F2;


    position: relative;
}

.Agent-Confirm {
    margin-top: 16px;
    margin-left: 16px;
}
.Agent-Confirm .ant-btn {
    border-radius: 12px;
    background: #262626;
    width: 96px;
    height: 40px;
    &:hover {
        background-color: #484848; /* 悬浮时的背景颜色 */
        border-color: #484848;    /* 悬浮时的边框颜色 */
        box-shadow: 0 0 0 1px #262626; /* 悬浮时的边框阴影 */
    }
}

.Agent-Refresh {
    position: absolute;
    left:112px;
    margin-top: 16px;
    margin-left: 16px;
}
.Agent-Refresh .ant-btn {
    border-radius: 12px;
    width: 144px;
    height: 40px;
}

.AgentView-Content-Input {
    /*width: 500px;
    height: 936px;*/
    flex:1;
    overflow:auto;
    display: flex;
    flex-direction: column;
    margin-left: 24px;
    margin-top: 16px;
    margin-right: 24px;
}
.AgentView-Content-Input-Col {
    width:504px;
    margin-top: 20px;

    font-size: 0;
}
.AgentView-Content-Input-Col-Title {
    color: #262626;
    text-align: justify;
    text-overflow: ellipsis;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 550;
    line-height: normal;

    width:64px;
    height: 20px;
    vertical-align: top;
    display: inline-block;
    margin-left: 0;
}
.AgentView-Content-Input-Col .ant-input {
    width:416px;
    vertical-align: top;
    display: inline-block;
    margin-left: 24px;

    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    
}
.AgentView-Content-Input-Col .ant-input::placeholder {
   
    overflow: hidden;
    color: #BFBFBF;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.Agent-Input-Checkbox {
    width: 504px;
    height: 84px;
    flex-shrink: 0;
    margin-top: 96px;
}
.Agent-Input-Checkbox .ant-checkbox-wrapper {
    color: var(--65, #595959);
    text-align: right;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 200% */

    margin-left: 88px;
}

/*
.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-inner,
.ant-checkbox:not(.ant-checkbox-disabled):hover .ant-checkbox-inner {
    border-color: #00BD79; 
    
}
.ant-checkbox-wrapper.ant-checkbox-wrapper-checked .ant-checkbox-inner {
    border-color: #00BD79;
    background-color: #00BD79;
}
.ant-checkbox-wrapper.ant-checkbox-wrapper-checked:hover .ant-checkbox-inner {
    border-color: #00BD79;
    background-color: #00BD79;
}

.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-checked:not(.ant-checkbox-disabled) .ant-checkbox-inner {
    border-color: #00BD79;
    background-color: #00BD79;
}


.ant-checkbox-wrapper.ant-checkbox-wrapper-checked:hover .ant-checkbox-inner {
    border-color: #00BD79; 
}
*/
.Agent-Wrap {
    flex:1;
    min-width: 500px;
    margin-right: 20px;
    flex-shrink: 0;
}

</style>